<template>
  <div class="student">
    <router-link :to="'/registrar/studentsHistory/index/'" class="link-type">
      <div class="to-history-students" @click="openHistoryStudents">
        <span>查看历史学员</span><el-icon><ArrowRight /></el-icon>
      </div>
    </router-link>

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="在读学员" name="one">
        <CurentStudents v-if="activeName === 'one'" />
      </el-tab-pane>
      <el-tab-pane label="报读情况" name="two">
        <EnrollingStudents v-if="activeName === 'two'" />
      </el-tab-pane>
      <!-- <el-tab-pane label="demo" name="three">
        <Demo />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>
<script setup name="Student">
import CurentStudents from './components/currentStudents/index.vue'
import EnrollingStudents from './components/enrollingStudents/index.vue'
// import Demo from './components/demo.vue'
import { ref } from 'vue'

//tabs标签页
const activeName = ref('one')
const handleClick = (tab, event) => {
  activeName.value = tab.props.name
}
//打开历史学员页面
const isShowHistory = ref(false)
const openHistoryStudents = () => {
  isShowHistory.value = true
}
const closeHistoryStudents = () => {
  isShowHistory.value = false
}
</script>

<style lang="scss" scoped>
.student {
  position: relative;
  height: 100%;
  overflow: auto;
  .to-history-students {
    position: absolute;
    top: 5px;
    right: 0;
    display: flex;
    align-items: center;
    // height: 30px;
    color: #409eff;
    z-index: 10;
    cursor: pointer;
    &:hover {
      opacity: 0.7;
    }
  }
}
</style>
<style lang="scss" scoped>
:deep(.demo-tabs) {
  .el-tabs__content {
    /* padding: 20px; */
    overflow: visible;
  }
}

:deep(.el-tabs__nav-scroll) {
  .el-tabs__nav {
    // display: flex !important;
    // justify-content: flex-end !important;
    .el-tabs__item {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.6);
      padding: 0 20px;
    }
  }
}
</style>

